<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="550" style="border:1px solid #000;"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Parameters
        const centerX = 250;
        const centerY = 250;
        const R = 150;
        const lineWidth = 2;

        // Set common styles
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';

        // Helper function to draw an arrowhead
        function drawArrowHead(ctx, x, y, angle, size) {
            ctx.save();
            ctx.beginPath();
            ctx.translate(x, y);
            ctx.rotate(angle);
            ctx.moveTo(0, 0);
            ctx.lineTo(-size, size / 2.5);
            ctx.moveTo(0, 0);
            ctx.lineTo(-size, -size / 2.5);
            ctx.stroke();
            ctx.restore();
        }

        // 1. Draw the circular wire loop
        ctx.beginPath();
        ctx.arc(centerX, centerY, R, 0, 2 * Math.PI);
        ctx.stroke();

        // 2. Draw the straight wire AB
        // Dashed extensions to indicate it's infinitely long
        ctx.beginPath();
        ctx.setLineDash([5, 5]);
        ctx.moveTo(centerX, centerY - R - 40);
        ctx.lineTo(centerX, centerY - R);
        ctx.moveTo(centerX, centerY + R);
        ctx.lineTo(centerX, centerY + R + 40);
        ctx.stroke();
        
        // Solid part of the wire (diameter)
        ctx.beginPath();
        ctx.setLineDash([]); // Reset to solid line
        ctx.moveTo(centerX, centerY - R);
        ctx.lineTo(centerX, centerY + R);
        ctx.stroke();

        // 3. Draw the radius line R
        const angleR = 150 * Math.PI / 180; // ~150 degrees
        const endX_R = centerX + R * Math.cos(angleR);
        const endY_R = centerY + R * Math.sin(angleR);
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(endX_R, endY_R);
        ctx.stroke();

        // 4. Draw current arrows
        // Arrow for I_1 (upward on the straight wire)
        const i1_arrow_pos_y = centerY - R * 0.5;
        const i1_angle = -Math.PI / 2; // Points up
        drawArrowHead(ctx, centerX, i1_arrow_pos_y, i1_angle, 12);

        // Arrow for I_2 (counter-clockwise on the circle)
        const i2_theta = -45 * Math.PI / 180; // Position on circle (top-right)
        const i2_x = centerX + R * Math.cos(i2_theta);
        const i2_y = centerY + R * Math.sin(i2_theta);
        const i2_angle = i2_theta - Math.PI / 2; // Tangent angle for CCW direction
        drawArrowHead(ctx, i2_x, i2_y, i2_angle, 12);
        
        // 5. Add all labels
        // Labels for points A and B
        ctx.font = '22px Times New Roman';
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText('B', centerX - 10, centerY - R);
        ctx.fillText('A', centerX - 10, centerY + R);

        // Label for Radius R
        ctx.textAlign = 'center';
        const midX_R = centerX + (R / 2) * Math.cos(angleR);
        const midY_R = centerY + (R / 2) * Math.sin(angleR);
        ctx.fillText('R', midX_R - 15, midY_R - 15);

        // Label for current I_1
        ctx.font = 'italic 22px Times New Roman';
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText('I', centerX + 15, i1_arrow_pos_y + 10);
        ctx.font = 'italic 16px Times New Roman';
        ctx.fillText('1', centerX + 24, i1_arrow_pos_y + 15);

        // Label for current I_2
        const i2_label_theta = -65 * Math.PI / 180; // Position for the label
        const i2_label_radius = R - 30;
        const i2_label_x = centerX + i2_label_radius * Math.cos(i2_label_theta);
        const i2_label_y = centerY + i2_label_radius * Math.sin(i2_label_theta);
        ctx.font = 'italic 22px Times New Roman';
        ctx.textAlign = 'center';
        ctx.fillText('I', i2_label_x, i2_label_y);
        ctx.font = 'italic 16px Times New Roman';
        ctx.fillText('2', i2_label_x + 9, i2_label_y + 5);

        // 6. Add the bottom caption
        ctx.font = '24px KaiTi'; // A common font for Chinese characters
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('习题 8-43 图', centerX, canvas.height - 10);

    </script>
</body>
</html>